<template>
  <index>
    <div class="login-page">
      <div @keyup.enter.exact="doLogin" class="login-left">
        <div class="login-left-tab">
          <div
            :class="active == 0 ? 'login-left-tabs login-left-tabs-checked' : 'login-left-tabs'"
            @click="active= 0"
          >密码登录</div>
          <div class="login-left-line"></div>
          <div
            :class="active == 1 ? 'login-left-tabs login-left-tabs-checked' : 'login-left-tabs'"
            @click="active= 1"
          >短信登录</div>
        </div>
        <el-input placeholder="请输入手机号" class="theme-input all-input" v-model="params.phone">
          <img slot="prefix" src="../../assets/img/register/phone.png" height="34px">
        </el-input>
        <div style="display: flex;" :style="{'flex-direction':active==0?'column':'column-reverse'}">
          <el-input
            v-if="active == 0"
            show-password
            placeholder="请输入密码"
            class="theme-input"
            v-model="params.password"
          >
            <img slot="prefix" src="../../assets/img/register/lock.png" height="29px">
          </el-input>
          <el-input
            v-if="active == 1"
            placeholder="请输入短信验证码"
            class="theme-input"
            v-model="params.yards"
          >
            <img slot="prefix" src="../../assets/img/register/123.png" height="30px">
            <el-button
              slot="suffix"
              type="text"
              class="login-left-text-blue"
              @click="sendSmsPassword"
              :disabled="codeLeftTime!=60"
            >
              发送验证码
              <span v-if="codeLeftTime!=60">({{codeLeftTime}})</span>
            </el-button>
          </el-input>

          <div class="identify" style="margin-bottom: 15px;">
            <el-col :span="13">
              <el-input placeholder="图形验证码" class="theme-input input-img-canvas" v-model="imgCode">
                <img slot="prefix" src="../../assets/img/register/anquan.png" height="30px">
              </el-input>
            </el-col>
            <el-col :span="7">
              <s-identify :identifyCode="identifyCode"></s-identify>
            </el-col>
            <el-col :span="4" class="login-canvas-button">
              <el-button type="text" @click="refreshCode">
                看不清
                <br>换一张
              </el-button>
            </el-col>
          </div>
        </div>

        <div class="login-foget-gray" @click="forgetPass">忘记密码？</div>
        <el-button class="theme-button login-button" @click="doLogin">登录</el-button>
      </div>
      <div class="login-right">
        <right-image text="还没有账号，" button="立即注册"></right-image>
      </div>
    </div>
  </index>
</template>


<script>
import index from './index'
import rightImage from './right-image'
import validate from '../../assets/utils/validate.js'
import _g from '../../assets/utils/global.js'
import SIdentify from './picVerfication'
import _subject from '../../assets/utils/subject'

export default {
  data() {
    return {
      loginDialog: false,
      active: 0, //设置默认tab为密码登录
      params: {
        //向后台传送的数据
        phone: '',
        password: '',
        yards: ''
      },
      data: [],
      code: '',
      imgCode: '',
      identifyCode: '',
      identifyCodes: '1234567890',
      codeLeftTime: 60 //获取验证码间隔
    }
  },
  methods: {
    checkPassword() {
      if (this.params.phone == '' || !validate.isPhone(this.params.phone)) {
        _g.message('请输入正确手机号', 'warning')
        return false
      }
      if (this.params.password == '') {
        _g.message('密码不能为空', 'warning')
        return false
      }
      if (this.identifyCode != this.imgCode) {
        _g.message('图片验证码不正确', 'warning')
        return false
      }
      return true
    },
    checkSms() {
      if (this.params.phone == '' || !validate.isPhone(this.params.phone)) {
        _g.message('请输入正确手机号', 'warning')
        return false
      }
      if (this.params.yards == '') {
        _g.message('短信验证码不能为空', 'warning')
        return false
      }
      if (this.identifyCode != this.imgCode) {
        _g.message('图片验证码不正确', 'warning')
        return false
      }
      return true
    },
    //发送手机短信验证码
    sendSmsPassword() {
      //点击发送验证码
      if (this.params.phone == '' || !validate.isPhone(this.params.phone)) {
        _g.message('请输入正确手机号', 'warning')
      } else if (this.identifyCode != this.imgCode) {
        _g.message('图形验证码不正确', 'warning')
      } else {
        this.params.sms = ''
        _g.apiPost('/login/sendSmsPassword.do', {
          phone: this.params.phone
        }).then(res => {
          _g.toMessage(res)
          if (res.status == 0) {
            this.setCodeTime()
          }
        })
      }
    },
    //登录方法
    doLogin() {
      //密码登录
      if (this.active == 0) {
        if (!this.checkPassword()) {
          return false
        } else {
          _g.apiPost('/login/loginPass.do', this.params).then(res => {
            // if (res) {
            //   _g.toMessage({
            //     status: res.status,
            //     msg: res.status == 0 ? '登录成功' : '用户名或密码错误'
            //   })
            // }
            if (res.status == 0) {
              this.setUserInfo(res.data.talent)
              localStorage.setItem('resumeIntegrity', JSON.stringify(res.data.resumeIntegrity))
              this.$router.push({
                path: '/index',
                query: { resumeIntegrity: res.data.resumeIntegrity }
              })
              _g.message('登录成功', 'success')
            } else {
              _g.toMessage(res)
            }
            this.active = 0
          })
        }
      }
      //短信登录
      if (this.active == 1) {
        if (!this.checkSms()) {
          return false
        } else {
          _g.apiPost('/login/loginSms.do', this.params).then(res => {
            if (res.status == 0) {
              this.setUserInfo(res.data.talent)
              localStorage.setItem('resumeIntegrity', JSON.stringify(res.data.resumeIntegrity))
              this.$router.push({
                path: '/index',
                query: { resumeIntegrity: res.data.resumeIntegrity }
              })
              _g.message('登录成功', 'success')
            } else {
              _g.toMessage(res)
            }
            this.active = 1
          })
        }
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
      // console.log(this.identifyCode)
    },

    init() {
      let left_time = localStorage.getItem(localSaved.loginTime)
      if (left_time > 0 && left_time != 60) {
        this.codeLeftTime = left_time
        clearInterval(this.settime)
        this.setCodeTime()
      }
    },
    /**
     * @name 设置验证码延时
     */
    setCodeTime() {
      this.settime = setInterval(() => {
        this.codeLeftTime--
        localStorage.setItem(localSaved.loginTime, this.codeLeftTime)
        if (this.codeLeftTime == 0) {
          clearInterval(this.settime)
          this.codeLeftTime = 60
          localStorage.setItem(localSaved.loginTime, this.codeLeftTime)
        }
      }, 1000)
    },
    forgetPass() {
      //点击忘记密码
      this.$router.push({ path: '/forget' })
    },
    setUserInfo(val) {
      // console.log('login info', val)
      localStorage.setItem(localSaved.commTalentId,String(val.id))
      localStorage.setItem(localSaved.userInfo, JSON.stringify(val))
      _subject.register()
    }
  },
  created() {
    this.makeCode()
    this.init()
  },
  mounted() {
    // 验证码初始化
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  components: {
    SIdentify,
    index,
    rightImage
  }
}
</script>

<style lang="scss" scoped>
.input-img-canvas {
  width: 180px !important;
  height: 55px !important;
  input {
    width: 100%;
    height: 100%;
  }
}
.code {
  margin: 400px auto;
  width: 68px;
  height: 45px;
  border: 1px solid red;
}
.identify {
  width: 360px;
  height: 55px;
  display: inline-block;
}
</style>
